<template>
  <div>
    <el-select
      ref="remoteSelect"
      class="asyncSelectBox"
      v-model="parameterObj[name]"
      :multiple="multiple"
      filterable
      remote
      reserve-keyword
      :clearable="clearable"
      :size="formSize"
      :disabled="disabled"
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      @change="change"
      @focus="focusMethod"
      :loading="data.loading"
    >
      <template v-if="name === 'recRuleCode'">
        <el-option
          v-for="(item, index) in data.option"
          :key="index"
          :value="typeof item === 'object' ? item[valueName] : item"
          :label="`${item[valueName]}.${item[labelName]}`"
          :title="`${item[valueName]}.${item[labelName]}`"
        >
        </el-option>
      </template>
      <template v-else>
        <el-option
          v-for="(item, index) in data.option"
          :key="index"
          :value="typeof item === 'object' ? item[valueName] : item"
          :label="typeof item === 'object' ? item[labelName] : item"
          :title="typeof item === 'object' ? item[labelName] : item"
        ></el-option>
      </template>
    </el-select>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { post } from '@/utils/request/index';
import { Message } from 'element-ui';

@Component({
  components: {},
})
export default class AsyncSelect extends Vue {
  @Prop({ default: 'name' }) name!: string;
  @Prop({ default: '' }) url!: string;
  @Prop({ default: 'small' }) formSize!: string;
  @Prop({ default: '' }) placeholder!: string;
  @Prop({ default: false }) disabled!: Boolean;
  @Prop({ default: '' }) options!: any;
  @Prop({ default: '' }) asyncName!: string;
  @Prop({ default: '' }) initValue!: string;
  @Prop({ default: 'name' }) labelName!: string;
  @Prop({ default: 'value' }) valueName!: string;
  @Prop({ default: false }) multiple!: Boolean;
  @Prop({ default: true }) clearable!: Boolean;
  @Prop({ default: false }) collapseTags!: Boolean;
  @Prop({ default: '' }) custom!: string;
  @Prop({ default: '' }) eventCustom!: string;
  @Prop({ default: '' }) parameterObj!: any;

  value = this.initValue || '';
  data = {
    loading: false,
    option: this.options || [],
  };

  focusMethod() {
    if (!(this.$refs.remoteSelect as any).query) {
      (this.$refs.remoteSelect as any).remoteMethod((this.$refs.remoteSelect as any).query);
    }
  }

  async remoteMethod(query) {
    // 是否能直接搜索
    const isSearch = this.name === 'recRuleCode';
    if (query !== '' || isSearch) {
      let timeout;
      this.data.loading = true;
      // 输入框防抖
      clearTimeout(timeout);
      timeout = setTimeout(async () => {
        this.data.loading = false;
        const parms = { current: 1, pageSize: 30 };
        parms[this.asyncName || this.name] = query;
        if (this.name === 'matchNum') {
          parms['parameter'] = 'matchNum';
        }
        const result = ((await post(this.url, parms)) as any).data;
        if (result.code === 2000) {
          this.data.option = Array.isArray(result.data) ? result.data : result.data.records;
          if (!this.data.option.length) {
            Message.error('无匹配数据');
          }
        }
      }, 500);
    } else {
      this.data.option = [];
    }
  }
  @Watch('options')
  fn(newValue) {
    this.data.option = newValue;
  }

  @Watch('initValue')
  fn1(newValue) {
    this.value = newValue;
  }

  change(value) {
    let selectedObj;
    if (this.multiple) {
      selectedObj = value.map((i) => this.data.option.find((item) => item[this.valueName] === i));
    } else {
      selectedObj = this.data.option.find((item) => item[this.valueName] === value) || value;
    }
    this.$emit('onChange', {
      data: selectedObj,
      value,
      valueName: this.valueName,
      name: this.name,
      eventCustom: this.eventCustom,
    });
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
